<%template _header%>
<%namespace YouHP.Model%>
<!--header end-->

<script type="text/javascript">
function changeAvatarOption(currentOption)
{
	if (_$('enterurl'))
	{
		_$('enterurl').style.display='none';
	}
	if (_$('uploadfile'))
	{
		_$('uploadfile').style.display='none';
	}
	switch (currentOption)
	{
		case "0":
			break;
		case "1":
			_$('uploadfile').style.display='block';
			break;
		case "2":
			_$('enterurl').style.display='block';
			break;
	}
}
</script>



<!--主体-->
<div class ="layout-cols2">
<%template _memmenu%>
	<div class="pannelcontent">

		<div class="pcontent">
		<div class="panneldetail">
	     <%template _membasemenu%>
	     	
			<div class="pannelbody">
			
                <%if IsPost%>
                <%template _msgbox%>
                <%else%>
		
					<div class="pannellist">
						
						<form action="" method="post" ID="Form1" enctype="multipart/form-data">
								<table class="photoimg">
							     <tr>
								<td>
								<img src="{User.Avatar}" width="100" height="100" id="usingavatarimg" alt="形象图" style=" border:1px solid #E1E4E6;"/>
								</td>
				<%if {UserGroupInfo.AllowAvatar}>0%>
								<td style ="padding-left:20px">
										<ul id="avatarbox">
											
										<%if {UserGroupInfo.AllowAvatar}>1%>
											<li>
												<input type="radio" id="avatartype1" name="avatartype" value="2" onclick="changeAvatarOption(this.value);"
												<%if avatartype==2%>
													checked="checked"
												<%/if%>/><label for="avatartype1">使用外部图片</label>
												<div id="enterurl" style="display: none;">
													URL地址: <input name="avatarurl" type="text" class="colorblue" id="avatarurl" onfocus="this.className='colorfocus';" onblur="this.className='colorblue';"  size="40" />
												</div>
											</li>
										<%/if%>
										
										<%if {UserGroupInfo.AllowAvatar}>2%>
											<li>
												<input type="radio" id="avatartype2" name="avatartype" value="1" onclick="changeAvatarOption(this.value);"
												<%if avatartype==1%>
													checked="checked"
												<%/if%>/><label for="avatartype2">上传头像图片</label>(图片大小必须小于200K,且为gif、jpg、png格式)
												<div id="uploadfile" style="display: none;">
												选择本地图片文件: <input name="file" id="file" type="file" size="40" class="colorblue" onfocus="this.className='colorfocus';" onblur="this.className='colorblue';" />
												</div>
											</li>
											
										
										<%/if%>
										
										<li>
											<input type="radio" id="avatartype3" name="avatartype" value="0" onclick="changeAvatarOption(this.value);BOX_show('fromsystem');" 
											<%if avatartype==0%>
												checked="checked"
											<%/if%>
											/><label for="avatartype3">使用系统头像 (点击选择...)</label>
											<input type="hidden" name="usingavatar" id="usingavatar" />
										</li>
										
										</ul>
										
									<%else%>
									
										<ul style="margin-top: 40px;"><li>您所在的用户组 "{UserGroupInfo.Name}" 没有更改头像的权限</li></ul>
										
									<%/if%>
							
								</td>
								</tr>
								</table>
								<div style="padding-right:20px" align="right">
								<input id="sendmsg" class="buttonstyle" type="submit" value="确定" name="sendmsg"/></div>
						  </form>
					
					</div>
					
               <%/if%>	

	</div>
</div>
<!--主体-->

<%if {ErrorCount}==0 && !{IsPost}%>
	<div id="BOX_overlay" style="background: #000; position: absolute; z-index:100; filter:alpha(opacity=50);-moz-opacity: 0.6;opacity: 0.6;"></div>
	<script type="text/javascript" src="/support/dnt/album.js"></script>
	<script type="text/javascript">
		function usethisavatar(e)
		{
			_$('usingavatar').value = e.src;
			
			var avatars = _$('fromsystem').getElementsByTagName('div');
			for (var i=0; i < avatars.length;i++)
			{
				avatars[i].style.border = "2px dashed white";
			}
			e.parentNode.style.border = "2px dashed black";
		}
		function selectionborder(e)
		{
			if (e.style.border != "2px dashed black" && e.style.border != "black 2px dashed")
			{				
				if (e.style.border == "2px dashed red" || e.style.border == "red 2px dashed" )
				{
					e.style.border = "2px dashed white";
				}
				else
				{
					e.style.border = "2px dashed red";
				}
			}
		}
	</script>

	<div id="fromsystem" class="avatarbackground" style="display: none; position: relative;">
			<div class="avatarlist">
				<ul>
					<%loop avatarfile AvatarfileList%>
						<li>
							<div onmouseover="selectionborder(this)" onmouseout="selectionborder(this)" style="<%if {avatarfile["filename"]}=={User.Avatar}%>border: 2px dashed black;<%else%>border: 2px dashed white;<%/if%>cursor: pointer; overflow:hidden; zoom:1; width:60px;"><img src="{avatarfile["filename"]}" onclick="usethisavatar(this);" alt="形象图名称" width="60" height="60"/></div>
						</li>
					<%/loop%>
				</ul>
			</div>
			<span class="avatarbutton">
				<input type="button" name="userthisavatar" id="userthisavatar" class="buttonstyle" value="确定" onclick="_$('usingavatarimg').src=_$('usingavatar').value;BOX_remove('fromsystem');" />
				<input type="button" name="canceluserthisavatar" id="canceluserthisavatar" class="buttonstyle" value="取消" onclick="BOX_remove('fromsystem');" />
			</span>
	</div>
<%/if%>


</div>
</div>
</div>

<%template _footer%>